<template>
  <div ref="trendContent" style="width: 100%; height: 100%" id="trend-content" />
</template>

<script setup name="Trend">
import * as echarts from 'echarts';
import {onMounted, ref, watch} from "vue";
const trendContent = ref(null);
let chart = null;
const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
});
function init () {
  if (chart) {
    echarts.dispose(chart);
    window.removeEventListener('resize', () => {
      chart.resize();
    })
  }

  let name = props.data[0].curveData.map((item) => item.time);
  let numbers = props.data[0].curveData.map((item) => item.data);
  let numberName = props.data[0].seriesName;
  let amounts = props.data[1].curveData.map((item) => item.data);
  let amountName = props.data[1].seriesName;

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    grid: {
      left: '5%',
      right: '5%',
    },
    legend: {
      show: true,
      data: [numberName, amountName]
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: name,
        axisLabel: {
          interval: 0,
          rotate: 60,
          margin: 10,
          color: '#999',
          fontSize: 12
        }
      },
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: numberName,
        smooth: true,
        symbolSize: 9,
        type: 'line',
        data: numbers,
        itemStyle: {
          color: "#1890FF",
          lineStyle: {
            color: "#1890FF",
          },
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#E1F2FF'//下层渐变
          }, {
            offset: 0.8,
            color: '#fff'
          }], false),
          shadowColor: 'rgba(0, 0, 0, 0.1)',
          shadowBlur: 10
        }
      },
      {
        name: amountName,
        smooth: true,
        symbolSize: 9,
        type: 'line',
        data: amounts,
        itemStyle: {
          color: "#67C23A",
          lineStyle: {
            color: "#67C23A",
          },
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#E1F2FF'//下层渐变
          }, {
            offset: 0.8,
            color: '#fff'
          }], false),
          shadowColor: 'rgba(0, 0, 0, 0.1)',
          shadowBlur: 10
        }
      }
    ]
  };
  chart = echarts.init(trendContent.value);
  chart.setOption(option);
  window.addEventListener('resize', () => {
    chart.resize();
  });
}
onMounted(() => {
  if (props.data && props.data.length > 0) {
    init();
  }
})
watch(() => props.data, v => {
  if (v && v.length > 0) {
    init();
  }
}, { immediate: true, deep: true })
</script>

<style scoped>
</style>
